<template>
  <div class="t" style="">
    <el-row>
      <el-col style="margin:20px auto;" :span="18">
        <div
          style="width: 100%;height: 120px;background: #fff;border-radius: 4px;margin-top: 30px; display: flex;align-items: center;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;position: relative;">
          <el-button type="primary" plain style="position: absolute;right: 14px;top: 14px;"
            @click="isEdit = true">编辑</el-button>
          <div
            style="width: 50%;height: 100%;padding: 20px 100px;box-sizing: border-box;display: flex;align-items: center;">
            <img :src="form.avatar" style="height:100%;border-radius: 50%;border: 2px solid #f1f1f1;" alt="">
            <div
              style="display: flex;height: 100%; flex-direction: column;justify-content: space-around;margin-left: 16px;">
              <div style="display: flex;align-items: center;min-width: 300px;">
                <div style="font-size: 20px;font-weight: bolder;">{{ form.nickname }}</div> <el-tag
                  v-for="e in form.roles" effect="dark" size="small" style="margin-left: 12px;" type="success">{{
                    e.name }}</el-tag><el-tag effect="dark" size="small" :color="t2[form.sex]" style="margin-left: 12px;"
                  :style="{
                    border: '1px solid ' + t2[form.sex]
                  }">{{
                    t1[form.sex] }}</el-tag>
              </div>
              <div style="display: flex;align-items: center;font-size: 12px;color: #d6d1cf;">账号:{{ form.username }}
              </div>
              <div style="display: flex;align-items: center;font-size: 12px;color: #d6d1cf;">邮箱:{{ form.email }}</div>
              <div style="display: flex;align-items: center;font-size: 12px;color: #d6d1cf;">手机号:{{ form.phone }}</div>
            </div>
          </div>
          <div
            style="width: 44%;height: 90%;padding: 12px 50px;box-sizing: border-box;display: flex;align-items: center;">
            <div
              style="display: flex;height: 100%; flex-direction: column;justify-content: space-around;margin-left: 16px;">
              <div style="font-size: 20px;font-weight: bolder;">权限列表:</div>
              <el-scrollbar height="100%">
                <el-tag effect="dark" v-for="e in form.roles?.map((es: any) => es.roles).flat()" size="small"
                  style="margin-left: 12px;" type="primary">{{
                    e.alias }}</el-tag>
              </el-scrollbar>

            </div>
          </div>
        </div>
        <div v-show="isEdit"
          style="width: 100%;height: calc(100vh - 360px);background: #fff;display: flex;flex-direction: column;align-items: center;  border-radius: 4px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;margin-top: 40px;padding:30px 40px;box-sizing: border-box;">
          <div style="font-size: 20px;font-weight: 600;">个人中心</div>
          <div style="width: 400px;">
            <el-form :model="form" label-width="auto" style="max-width: 400px;margin-top: 40px;">
              <el-form-item label="账号:">
                <el-input v-model="form.username" />
              </el-form-item>
              <el-form-item label="昵称:">
                <el-input v-model="form.nickname" />
              </el-form-item>
              <el-form-item label="邮箱:">
                <el-input v-model="form.email" />
              </el-form-item>
              <el-form-item label="手机号:">
                <el-input v-model="form.phone" />
              </el-form-item>
              <el-form-item label="性别:">
                <el-radio-group v-model="form.sex">
                  <el-radio :value="1">男</el-radio>
                  <el-radio :value="0">女</el-radio>
                  <el-radio :value="2">保密</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <div style="display: flex;width: 100%; justify-content: center;margin-top: 40px;"><el-button
                    type="primary" @click="onSubmit">保存</el-button>
                </div>

              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getuserinfo, putuser } from '@/api/uesr';
import { ElMessage } from 'element-plus';
const isEdit = ref(false)
// do not use same name with ref
const form = ref({
  avatar: '',
  nickname: '',
  username: '',
  sex: '',
  email: '',
  phone: '',
  roles: []
}) as any
const t1 = { 0: '女', 1: "男", 2: "未知" } as any
const t2 = { 0: "#fb7299", 1: "#029bfc", 2: "#bebebe" } as any
const init = async () => {
  let res = await getuserinfo()
  form.value = res.data
}
init()
const onSubmit = async () => {
  delete form.value.roles
  putuser(form.value).then(() => {
    ElMessage({
      message: '修改成功',
      grouping: true,
      type: 'success',
    })
    init()
  })


}
</script>

<style scoped>
.t {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
</style>